
<link href="__COMMON__/lib/webuploader/css/webuploader.css" type="text/css" rel="stylesheet">

    <!--用来存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div class="show_avatar">
            <div class=" avatar_select">
                <div id="avatar_{$uid}_original" class="avatar_preview img-cutter">
                    <div class="canvas"><img src="{$user.avatar256}" alt=""></div>
                </div>  
            </div>
    </div>

    <div class="">
    <div id="upload_avatar_{$uid}" class="avatar_upload_btn" style="margin-top:5px">{:lang('_AVATAR_SELECT_')}</div>
    <button class="btn btn-block btn-lg btn-warning avatar_btn" data-role="avatar_btn"  type="button" style="margin-top:5px">{:lang('_AVATAR_SAVE_')}</button>
    </div>


<script type="text/javascript" charset="utf-8" src="__COMMON__/lib/webuploader/js/webuploader.js"></script>

<script>
    $(function () {
        
        var avatarCutter;

        var uploader_{$uid}= WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: false,
            // swf文件路径
            swf: 'Uploader.swf',
            // 文件接收服务端。
            server: "{:Url('api/File/uploadAvatar',array('uid'=>$uid))}",
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#upload_avatar_{$uid}',
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            }
        });
        uploader_{$uid}.on('fileQueued', function (file) {
            uploader_{$uid}.upload();
            toast.showLoading();
        });
        /*上传成功*/
        uploader_{$uid}.on('uploadSuccess', function (file, ret) {
            toast.hideLoading();
            
            if (ret.code == 0) {
                toast.error(ret.msg);
            } else {
                
                path = ret.data[0].path;
                var src = ret.data[0].path;
                console.log(src);
                $("#avatar_" + "{$uid}" + "_original .canvas").html('<img src="'+src+'" />');

                $("#avatar_" + "{$uid}" + "_original .canvas img").load(function () {
                    //图片加载完成后初始化裁剪组件
                    $("#avatar_" + "{$uid}" + "_original").imgCutter({
                        fixedRatio: true,
                        defaultWidth: 256,
                        defaultHeight: 256,
                    });
                })

                //重置队列
                uploader_{$uid}.reset();
            }
        });

        $('[data-role=avatar_btn]').click(function(){
            
            // 获取 imgCutter 实例
            avatarCutter = $("#avatar_" + "{$uid}" + "_original").data('zui.imgCutter');
            // 调用 resetImg 方法
            //avatarCutter.resetImage('http://zui.sexy/docs/img/img1.jpg');
            // 调用 getData 方法
            var avatarCutterData = avatarCutter.getData();

            //计算缩放后的比例
            var widthX = parseFloat(avatarCutterData.originWidth/avatarCutterData.scaleWidth);
            var heightX = parseFloat(avatarCutterData.originHeight/avatarCutterData.scaleHeight);

            var x = parseInt(avatarCutterData.left*widthX);
            var y = parseInt(avatarCutterData.top*heightX);
            var w = parseInt(avatarCutterData.width*widthX);
            var h = parseInt(avatarCutterData.height*heightX);

            var crop = x + ',' + y + ',' + w + ',' + h;

            console.log(avatarCutterData);
            //return;
            //检查是否已经裁剪过
            if (typeof (crop) == 'undefined') {
                toast.error("{:lang('_AVATAR_UPLOAD_AND_CROP_')}");
                return;
            }
            
            var uid ='{$uid}';
            //提交到服务器
            var url = "{:url('ucenter/member/saveAvatar')}";

            $.post(url, {uid: uid, crop: crop, path:path}, function (res) {
                handleAjax(res);
            });
        })
    })
</script>
       

